<!DOCTYPE html>
<!-- saved from url=(0040)http://amazeui.org/examples/landing.html -->
<html class="am-touch js cssanimations"><head lang="zh"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <title>发票小助手 - OkayApi开发示例</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp">
  <link rel="alternate icon" type="image/png" href="../img/favicon.png">
  <link rel="stylesheet" href="../css/amazeui.min.css">
  <style>
    .get {
      background: #1E5B94;
      color: #fff;
      text-align: center;
      padding: 100px 0;
    }

    .get-title {
      font-size: 200%;
      border: 2px solid #fff;
      padding: 20px;
      display: inline-block;
    }

    .get-btn {
      background: #fff;
    }

    .detail {
      background: #fff;
    }

    .detail-h2 {
      text-align: center;
      font-size: 150%;
      margin: 40px 0;
    }

    .detail-h3 {
      color: #1f8dd6;
    }

    .detail-p {
      color: #7f8c8d;
    }

    .detail-mb {
      margin-bottom: 30px;
    }

    .hope {
      background: #0bb59b;
      padding: 50px 0;
    }

    .hope-img {
      text-align: center;
    }

    .hope-hr {
      border-color: #149C88;
    }

    .hope-title {
      font-size: 140%;
    }

    .about {
      background: #fff;
      padding: 40px 0;
      color: #7f8c8d;
    }

    .about-color {
      color: #34495e;
    }

    .about-title {
      font-size: 180%;
      padding: 30px 0 50px 0;
      text-align: center;
    }

    .footer p {
      color: #7f8c8d;
      margin: 0;
      padding: 15px 0;
      text-align: center;
      background: #2d3e50;
    }
  </style>
</head>
<body class="am-with-topbar-fixed-top">
<header class="am-topbar am-topbar-fixed-top">
  <div class="am-container">
    <h1 class="am-topbar-brand">
      <a href="#">发票小助手</a>
    </h1>

    <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-secondary am-show-sm-only am-collapsed" data-am-collapse="{target: &#39;#collapse-head&#39;}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>

    <div class="am-topbar-collapse am-collapse" id="collapse-head" style="height: 20px;">
      <ul class="am-nav am-nav-pills am-topbar-nav">
        <li class="am-active"><a href="http://demo.okayapi.com/fabiao/">首页</a></li>
        <li ><a href="#addFaBiaoApp">添加发票信息</a></li>
        <li ><a href="http://www.okayapi.com/?f=fabiao">小白接口</a></li>
        <li><a href="https://gitee.com/dogstar/okayapi-demo">示例源代码</a></li>
      </ul>

    </div>
  </div>
</header>

<div class="get">
  <div class="am-g">
    <div class="am-u-lg-12">
      <h1 class="get-title">OkayApi开发示例</h1>

      <p>
        基于Amaze UI + Vue + OkayApi 开发，可直接使用，也可开发使用。
      </p>

      <p>
        <a href="http://www.okayapi.com/?f=fabiao" class="am-btn am-btn-sm get-btn">开启您的云端接口√</a>
      </p>
    </div>
  </div>
</div>

<div class="detail">
  <div class="am-g am-container">
    <div class="am-u-lg-12" id="myFaBiaoApp" >
      <h2 class="detail-h2">我的发票</h2>

      <div class="am-g">
        <div class="am-u-lg-3 am-u-md-6 am-u-sm-12 detail-mb" v-for="item in fabiao_list" >

          <h3 class="detail-h3">
            <i class="am-icon-smile-o am-icon-sm" aria-hidden="true"></i>

            {{ item.company_name }}
          </h3>

          <p class="detail-p">
          纳税人识别号：{{ item.company_id }}
          <br /><a :href="'http://api.okayapi.com/?service=Ext.QrCode.Png&size=6&data=' + item.company_id " target="_blank" >查看二维码</a>
          </p>
          <p class="detail-p">
          企业地址：{{ item.company_address }}
          <br /><a  :href="'http://api.okayapi.com/?service=Ext.QrCode.Png&size=6&data=' + item.company_address " target="_blank" >查看二维码</a>
          </p>

        </div>
      </div>
    </div>
  </div>
</div>

<div class="hope">
  <div class="am-g am-container">
    <div class="am-u-lg-4 am-u-md-6 am-u-sm-12 hope-img">
      <img src="../img/landing.png" alt="" data-am-scrollspy="{animation:&#39;slide-left&#39;, repeat: false}" class="am-scrollspy-init am-scrollspy-inview am-animation-slide-left">
      <hr class="am-article-divider am-show-sm-only hope-hr">
    </div>
    <div class="am-u-lg-8 am-u-md-6 am-u-sm-12">
      <h2 class="hope-title">小白接口助您快速打造轻应用</h2>

      <p>
        小白接口，是免费，免开发，直接可用的云端数据接口！
        我们致力于让每个开发者都能轻松使用云端接口，体验应用开发的乐趣，创造价值！
      </p>
    </div>
  </div>
</div>

<div class="about">
  <div class="am-g am-container">
    <div class="am-u-lg-12" id="addFaBiaoApp">
      <h2 class="about-title about-color">添加发票信息</h2>

      <div class="am-g">
        <div class="am-u-lg-6 am-u-md-4 am-u-sm-12">
          <form class="am-form">
            <label for="company_name" class="about-color">企业名称 *</label>
            <input id="company_name" type="text" v-model="company_name" placeholder="请输入企业单位的名称" >
            <br>
            <label for="company_id" class="about-color">纳税人识别号 *</label>
            <input id="company_id" type="text" v-model="company_id" placeholder="请输入纳税人识别号" >
            <br>
            <label for="company_address" class="about-color">企业地址</label>
            <input id="company_address" type="text" v-model="company_address" >
            <br>
          </form>
            <button type="submit" class="am-btn am-btn-primary am-btn-sm" v-on:click="add"><i class="am-icon-check"></i> 保存</button> {{ tips }}
          <hr class="am-article-divider am-show-sm-only">
        </div>

        <div class="am-u-lg-6 am-u-md-8 am-u-sm-12">
          <h4 class="about-color">简单说明</h4>

          <p>发票信息保存后，下次再访问，将会通过接口从云端服务器获取数据。应用的发票数据，可以在<a href="http://admin.okayapi.com/?r=Data/MainSetList" target="_blank">小白后台</a>实时查看和管理。</p>
        </div>
      </div>
    </div>
  </div>
</div>

<footer class="footer">
  <p>© 2017-2018 <a href="http://www.okayapi.com/?f=fabiao" target="_blank">小白接口 OkayApi.COM </a> All Rights Reserved. </p>
</footer>


<!--[if (gte IE 9)|!(IE)]><!-->
<script src="../js/jquery.min.js"></script>
<!--<![endif]-->
<script src="../js/amazeui.min.js"></script>
<script src="../js/vue.js"></script>


    <script type="text/javascript">
    /**
     * 获取客户端本地唯一ID
     */
    function retrieveCid() {
        let cid = $.AMUI.utils.cookie.get('demo_fb_cid')

        if (cid == null || cid === undefined || cid.length == 0) {
            // 初始化一个
            cid = "fabiao_" + Date.parse(new Date())
        }

        // 延吾之寿
        $.AMUI.utils.cookie.set('demo_fb_cid', cid, { expires: 30 * 86400, path: '/', domain: 'demo.okayapi.com'})

        return cid
    }

    var myFaBiaoApp = new Vue({
        el: '#myFaBiaoApp',
        data: {
            fabiao_list: []
        },
        methods: {
            init: function() {
                let _self = this
                let cid = retrieveCid()

                $.ajax({
                  url: '/okayapi.php',
                  dataType: 'json',
                  data: { s: 'App.Main_Set.GetList', key: cid, sort: "2", perpage: 4 } // 取前4个，按创建时间逆序
                }).done(function (rs) {
                    console.log(rs)

                    if (rs.data && rs.data.err_code == 0) {
                        $.each(rs.data.items, function (index, el) {
                          let item = {
                            company_id: el.data.company_id,
                            company_name: el.data.company_name,
                            company_address: el.data.company_address,
                            add_time: el.add_time
                          }

                          _self.fabiao_list.push(item)
                        })
                    } else {
                        console.log(rs.data.err_msg)
                    }
                });
            }
        }
    })

    myFaBiaoApp.init()

    var addFaBiaoApp = new Vue({
        el: '#addFaBiaoApp',
        data: {
            company_id: '',
            company_name: '',
            company_address: '',
            tips: ''
        },
        methods: {
            add: function() {
                let _self = this
                let cid = retrieveCid()

                if (this.company_id.length == 0) {
                    this.tips = '请先输入企业名称哦~~';
                    return false;
                }
                if (this.company_name.length == 6) {
                    this.tips = '请先输入纳税人识别号哦~~';
                    return false;
                }

                let setData = {
                    company_id: _self.company_id,
                    company_name: _self.company_name,
                    company_address: _self.company_address
                }

                $.ajax({
                  url: '/okayapi.php',
                  dataType: 'json',
                  data: { s: 'App.Main_Set.Add', key: cid, data: JSON.stringify(setData) }
                }).done(function (rs) {
                    if (rs.data && rs.data.err_code == 0) {
                        _self.tips = '发票添加成功，正在刷新当前页面~~'

                        window.location.href = '/fabiao/';
                    } else {
                        console.log(rs.data.err_msg)
                    }
                });
            }
        }
    })
    </script>

</body></html>
